<template>
	<div class="medical-record-container">
		<!-- 查询区域 -->
		<div class="search-section">
			<el-card class="search-card">
				<div class="search-form">
					<el-input placeholder="请输入患者诊疗号" v-model="visitId" clearable
						style="width: 300px; margin-right: 15px;">
						<template slot="prepend">诊疗号</template>
					</el-input>
					<el-button type="primary" @click="getMedicalRecord()" :loading="loading" icon="el-icon-search">
						查询
					</el-button>
				</div>
			</el-card>
		</div>

		<!-- 病历列表区域 -->
		<div class="record-list-section" v-if="tableData.length > 0">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="record in tableData" :key="record.docId"
					style="margin-bottom: 20px;">
					<el-card class="record-card" shadow="hover">
						<!-- 病历卡片头部 -->
						<div slot="header" class="card-header">
							<span class="record-title">{{ record.docType }}</span>
							<el-tag :type="getEmpowerTagType(record.isEmpower)" size="small">
								{{ record.isEmpower }}
							</el-tag>
						</div>

						<!-- 病历基本信息 -->
						<div class="record-info">
							<div class="info-item">
								<i class="el-icon-document"></i>
								<span class="label">病历ID：</span>
								<span class="value">{{ record.docId }}</span>
							</div>
							<div class="info-item">
								<i class="el-icon-date"></i>
								<span class="label">创建时间：</span>
								<span class="value">{{ formatDate(record.createdTime) }}</span>
							</div>
							<div class="info-item">
								<i class="el-icon-office-building"></i>
								<span class="label">医院：</span>
								<span class="value">{{ record.hospitalName }}</span>
							</div>
						</div>

						<!-- 操作按钮区域 -->
						<div class="action-buttons">
							<!-- 未授权状态：发送授权请求 -->
							<el-button v-if="record.isEmpower === '未授权'" type="primary" size="small"
								@click="requestEmpower(record)" :loading="record.requestLoading" plain
								icon="el-icon-connection">
								请求授权
							</el-button>

							<!-- 授权中状态：显示等待 -->
							<el-button v-if="record.isEmpower === '授权中'" type="info" size="small" disabled
								icon="el-icon-time">
								授权审核中
							</el-button>
							
							<!-- 已拒绝：显示拒绝 -->
							<el-button v-if="record.isEmpower === '已拒绝'" type="danger" size="small" disabled>
								请求授权
							</el-button>

							<!-- 已授权状态：查看详情 -->
							<el-button v-if="record.isEmpower === '已授权'" type="success" size="small"
								@click="showRecordDetail(record)" icon="el-icon-view">
								查看详情
							</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<!-- 空状态 -->
		<div class="empty-state" v-else-if="!loading && hasSearched">
			<el-empty description="暂无病历数据" :image-size="200">
				<div slot="image">
					<i class="el-icon-document-delete" style="font-size: 100px; color: #c0c4cc;"></i>
				</div>
			</el-empty>
		</div>

		<!-- 病历详情抽屉 -->
		<el-drawer :visible.sync="drawerVisible" title="病历详情" size="50%" :close-on-click-modal="false">
			<div class="record-detail">
				<!-- 患者基本信息 -->
				<el-descriptions v-if="currentRecord && currentRecord.medicalRecordInfo" title="患者信息" :column="2"
					border>
					<el-descriptions-item label="患者ID">
						{{ currentRecord.medicalRecordInfo.patientId || '暂无' }}
					</el-descriptions-item>
					<el-descriptions-item label="患者姓名">
						{{ currentRecord.medicalRecordInfo.patientName || '暂无' }}
					</el-descriptions-item>
					<el-descriptions-item label="科室">
						{{ currentRecord.medicalRecordInfo.deptName || '暂无' }}
					</el-descriptions-item>
					<el-descriptions-item label="主治医生">
						{{ currentRecord.medicalRecordInfo.doctorName || '暂无' }}
					</el-descriptions-item>
					<el-descriptions-item label="就诊时间">
						{{ formatDate(currentRecord.medicalRecordInfo.createdTime) || '暂无' }}
					</el-descriptions-item>
					<el-descriptions-item label="就诊ID">
						{{ currentRecord.medicalRecordInfo.visitId || '暂无' }}
					</el-descriptions-item>
				</el-descriptions>

				<!-- 病历详细内容 -->
				<div class="record-content" v-if="currentRecord && currentRecord.medicalRecordInfo">
					<el-tabs type="border-card">
						<!-- 主诉 -->
						<el-tab-pane label="主诉">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.chiefComplaint || '暂无主诉信息' }}
							</div>
						</el-tab-pane>

						<!-- 现病史 -->
						<el-tab-pane label="现病史">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.historyOfPresentIllness || '暂无现病史信息' }}
							</div>
						</el-tab-pane>

						<!-- 既往史 -->
						<el-tab-pane label="既往史">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.pastHistory || '暂无既往史信息' }}
							</div>
						</el-tab-pane>

						<!-- 体格检查 -->
						<el-tab-pane label="体格检查">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.physicalExam || '暂无体格检查信息' }}
							</div>
						</el-tab-pane>

						<!-- 初步诊断 -->
						<el-tab-pane label="初步诊断">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.initialDiagnosis || '暂无初步诊断信息' }}
							</div>
						</el-tab-pane>

						<!-- 检查报告 -->
						<el-tab-pane label="检查报告">
							<div class="content-box">
								{{ currentRecord.medicalRecordInfo.reportResult || '暂无检查报告信息' }}
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>

				<!-- 无详细信息的提示 -->
				<div v-else class="no-detail">
					<el-empty description="暂无详细病历信息" />
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import http from "../../utils/request";

	export default {
		name: 'MedicalRecordList',
		data() {
			return {
				visitId: '',
				tableData: [],
				loading: false,
				drawerVisible: false,
				currentRecord: null,
				hasSearched: false // 标记是否已进行过搜索
			}
		},
		methods: {
			async getMedicalRecord() {
				if (!this.visitId) {
					this.$message.warning('请输入诊疗号');
					return;
				}

				this.loading = true;
				this.hasSearched = true;
				try {
					const resp = await http.get('/doctor/getMedicalRecord', {
						headers: {
							visitId: this.visitId,
							doctorId: this.$store.state.user.id
						}
					});

					if (resp.data.code === 1) {
						this.tableData = resp.data.data || [];
						this.$message.success('查询成功');
					} else {
						this.$message.error(resp.data.msg || '查询失败');
					}
				} catch (error) {
					console.error('查询病历失败:', error);
					this.$message.error('查询失败，请检查网络连接');
				} finally {
					this.loading = false;
				}
			},

			// 发送授权请求
			async requestEmpower(record) {
				this.$set(record, 'requestLoading', true);
				try {
					// 这里需要你提供发送授权的接口
					const resp = await http.post('/doctor/requestEmpower', {
						docId: record.docId,
						doctorId: this.$store.state.user.id,
						visitId: this.visitId
					});

					if (resp.data.code === 1) {
						this.$message.success('授权请求发送成功');
						record.isEmpower = '授权中';
						// 重新加载数据或直接更新状态
						await this.getMedicalRecord();
					} else {
						this.$message.error(resp.data.msg || '发送失败');
					}
				} catch (error) {
					console.error('发送授权请求失败:', error);
					this.$message.error('发送失败');
				} finally {
					this.$set(record, 'requestLoading', false);
				}
			},

			// 查看病历详情
			showRecordDetail(record) {
				this.currentRecord = record;
				this.drawerVisible = true;
			},

			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return '暂无';
				return dateString.replace('T', ' ').substring(0, 16);
			},

			// 根据授权状态获取标签类型
			getEmpowerTagType(status) {
				const typeMap = {
					'未授权': 'info',
					'授权中': 'warning',
					'已授权': 'success',
					'未知': 'danger'
				};
				return typeMap[status] || 'info';
			}
		}
	}
</script>

<style scoped>
	.medical-record-container {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: calc(100vh - 84px);
	}

	.search-section {
		margin-bottom: 20px;
	}

	.search-card {
		border-radius: 8px;
	}

	.search-form {
		display: flex;
		align-items: center;
	}

	.record-list-section {
		margin-top: 20px;
	}

	.record-card {
		height: 100%;
		transition: transform 0.3s ease;
	}

	.record-card:hover {
		transform: translateY(-5px);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 20px;
	}

	.record-title {
		font-size: 16px;
		font-weight: bold;
		color: #409eff;
	}

	.record-info {
		margin-bottom: 20px;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 13px;
		color: #606266;
	}

	.info-item i {
		margin-right: 8px;
		color: #909399;
	}

	.info-item .label {
		min-width: 60px;
		color: #909399;
	}

	.info-item .value {
		flex: 1;
		color: #303133;
		word-break: break-all;
	}

	.action-buttons {
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400px;
	}

	.record-detail {
		padding: 0 20px;
	}

	.record-detail .el-descriptions {
		margin-bottom: 20px;
	}

	.record-content {
		margin-top: 20px;
	}

	.content-box {
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 4px;
		line-height: 1.6;
		white-space: pre-wrap;
		word-wrap: break-word;
		min-height: 150px;
	}

	.no-detail {
		text-align: center;
		padding: 40px 0;
	}

	@media (max-width: 768px) {
		.search-form {
			flex-direction: column;
			gap: 10px;
		}

		.search-form .el-input {
			width: 100% !important;
			margin-right: 0 !important;
		}

		.record-detail {
			padding: 0 10px;
		}

		.card-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}
	}
</style>